<template>
    <div>
      <el-table
        ref="multipleTable"
        :data="activityList"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55"> </el-table-column>
        <el-table-column prop="activityId" align="center" label="活动ID" sortable width="120">
        </el-table-column>
        <el-table-column prop="activityName" align="center" label="活动名称" sortable width="120">
        </el-table-column>
        <el-table-column prop="joinNumber" align="center" label="参与人数" sortable width="120">
        </el-table-column>
        <el-table-column align="center" label="宣传图片">
          <template slot-scope="scope">
            <!-- <img style="width: 120px; height: 120px" :src="scope.row.activityUrl"> -->
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.activityUrl"
              :preview-src-list="previewSrcList"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建日期">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
            {{ scope.row.gmtCreate }}</template
          >
        </el-table-column>
        <el-table-column align="center" label="是否结束">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isFinish === 1" type="danger" plain>已结束</el-button>
            <el-button v-else type="success" plain>进行中</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" width="250">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="activityName"
              size="mini"
              @keyup.enter.native="handleSearch(scope)"
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope" align="center">
            <el-button
              width="100"
              size="mini"
              @click="handleEdit(scope.$index, scope.row.activityId)"
              >编辑</el-button
            >
            <el-button
              width="100"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row.activityId)"
              >删除</el-button
            >
            <el-button
              v-if="scope.row.isFinish === 0"
              width="100"
              size="mini"
              type="danger"
              @click="handleFinish(scope.$index, scope.row.activityId)"
              >结束</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="deleteSelect()">删除选中</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
      <el-pagination
        :current-page="current"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center"
        layout="total, prev, pager, next, jumper"
        @current-change="getActivityPage"
      />
    </div>
  </template>
  
  <script>
  import activity from "@/api/activity";
  
  export default {
    data() {
      return {
        activityList: [],
        activityName: '',
        activityQuery: {},
        ids: [],
        previewSrcList: [],
        current: 1, //页码
        limit: 4, //每页多少行
        total: 0 ,//总记录数,
        multipleSelection: [],
      };
    },
    created() {
      this.getActivityPage();
    },
    methods: {
      // 分页获取所有轮播图
      getActivityPage(current = 1) {
        this.current = current
        activity.getActivityPageVo(this.current, this.limit).then( res => {
          this.previewSrcList = []
          this.activityList = res.data.activityList;
          this.total = res.data.total;
          this.activityList.forEach((activity) => {
          this.previewSrcList.push(activity.activityUrl)
          })
        })
      },
  
      getActivityPageQuery(current = 1) {
        this.current = current
        console.log(this.activityQuery)
        activity.getActivityPageQueryVo(this.current, this.limit, this.activityQuery).then(res => {
            this.previewSrcList = []
            this.activityList = res.data.activityList;
            this.total = res.data.total;
            this.activityList.forEach((activity) => {
            this.previewSrcList.push(activity.activityUrl)
          })
        });
      },
      // 获取所有活动
      getAll() {
        activity.getAllActivity().then((res) => {
          console.log(res.data);
          this.previewSrcList = []
          this.activityList = res.data.activityList
        });
      },
      // 反选和取消
      toggleSelection(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
  
      // 批量删除
      deleteSelect() {
        this.ids = this.ids.sort((a, b) => a - b)
        this.$confirm("此操作将永久删除这些活动, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            activity.deleteAllSelect(this.ids).then((res) => {
              if (res.success) {
                this.getActivityPageQuery();
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: "出现故障,请稍后",
                  type: "failure",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      formatter(row, column) {
        return row.address;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.ids = val.map( res => {
          return res.activityId
        });
      },
  
      // 跳转编辑或添加页面
      handleEdit(index, row) {
        this.$router.push({ path: "/activity/add", query: { id: row } });
      },
  
      // 删除单个
      handleDelete(index, row) {
        this.$confirm("此操作将永久删除该活动, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            activity.deleteOneById(row).then((res) => {
              if (res.success) {
                this.getActivityPageQuery();
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: "出现故障,请稍后",
                  type: "failure",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      handleFinish(index, row) {
        this.$confirm("此操作将永久结束该活动, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            activity.finishActivity(row).then((res) => {
              if (res.success) {
                this.getActivityPageQuery();
                this.$message({
                  message: "成功结束",
                  type: "success",
                });
              } else {
                this.$message({
                  message: "出现故障,请稍后",
                  type: "failure",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消结束",
            });
          });
      },
      handleSearch(scope) {
        this.activityQuery.activityName = this.activityName
        if (this.activityName.length > 0) {
          this.getActivityPageQuery()
        } else {
          this.getActivityPage();
          this.$message({
            message: "您的搜索为空,搜索全部内容",
            type: "info",
          });
        }
        this.activityName = ''
        // this.activityQuery.activityName = ''
      },
    }
  }
  </script>
  
  <style>
  </style>
  